{extend name="layout/app" /}

{block name="title"}发布博客{/block}

{block name="css"}
<style>

</style>
{/block}

{block name="content"}
<div class="container">
    <div class="card mb-3 mt-4">
        <div class="card-body">
            <form id="form-create" method="post" action="{:url('/blog')}">
                <meta name="csrf-token" id="__token__" content="{:token()}">
                <div id="div-msg" hidden></div>
                <div class="form-group">
                    <label for="exampleFormControlInput1">标题</label>
                    <input type="text" name="title" class="form-control" id="exampleFormControlInput1">
                </div>
                <div class="form-group">
                    <label for="exampleFormControlSelect1">分类</label>
                    <select class="form-control" name="categories" id="exampleFormControlSelect1">
                        <option value="0">请选择分类</option>
                        <option value="1">PHP</option>
                        <option value="2">HTML</option>
                        <option value="3">CSS</option>
                        <option value="4">JS</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="exampleFormControlTextarea1">内容</label>
                    <textarea class="form-control" name="content" id="exampleFormControlTextarea1" rows="10"></textarea>
                </div>
                <button id="btn-create" type="button" class="btn btn-primary w-25 offset-4">发布</button>
            </form>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
    $(function () {
        // 显示提示信息
        $('#btn-create').click(function () {
            var form = $('#form-create');
            $.ajax({
                url: form.attr('action'),
                type: 'post',
                data: form.serialize(),
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (res) {
                    if (res.code == 200){
                        notify('success', res.msg)
                        setTimeout(function (){
                            window.location.reload();
                        }, 1000);
                    } else if (res.code == 400){
                        $('#div-msg').removeAttr('hidden')
                        $('#div-msg').addClass('alert alert-danger')
                        $('#div-msg').html(`${ res.msg }`);
                        getNewToken();
                    }
                }
            })
        })

    })
</script>
{/block}
